<template>
    <div class="amap-page-container map-zoom">
        <div id="container" style="width: 100%;height: 100%;"></div>
    </div>
</template>

<style scoped>
    .amap-demo {
        height: 77vh;
    }
    .amap-page-container{
        height: 77vh;
        padding-bottom: 0px;
    }
</style>

<script>
    export default {
        props: {
            heatmapData: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data() {
            let self = this;

            return {

            };
        },
        mounted() {
            // console.info(this.heatmapData);
            setTimeout(() => {
                this.initMap();
            }, 500)
        },
        methods: {
            //判断浏览区是否支持canvas
            // isSupportCanvas() {
            //     var elem = document.createElement('canvas');
            //     return !!(elem.getContext && elem.getContext('2d'));
            // },
            initMap() {
                let _this = this;
                var map = new AMap.Map("container", {
                    resizeEnable: true,
                    center: [116.418261, 39.921984],
                    zoom: 11
                });
                // if (!_this.isSupportCanvas()) {
                //     alert('热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~')
                // }
                var heatmap;
                map.plugin(["AMap.Heatmap"], function () {
                    heatmap = new AMap.Heatmap(map, {
                        radius: 25, //给定半径
                        opacity: [0, 0.8]
                    });
                    heatmap.setDataSet({
                        data: _this.heatmapData,
                        max: 100
                    });
                });
            }
        }
    }
</script>
